<script>
// 数据详情页
import { defineComponent } from 'vue'
export default defineComponent({
	name: 'WeworkQrList'
})
</script>
<script setup>
import { multiStaffChoose } from '../lib/index'
import * as echarts from 'echarts'
import { dateTypes } from '@/utils'
import { staffListData } from '@/data'
import MyIcon from '@/components/my-icon/index.vue'
import { ref, onMounted } from 'vue'
	import {postDataGroupChart} from '@/api'
const queryForm = ref({
		type: 1,
		date_type: 'day',
		staffs: []
	})
const isRefresh = ref(true)
const handleRefresh = () => {
	isRefresh.value = false
	isRefresh.value = true
}
const dialogVisible = ref(false)
const staffData = ref([])
const chooseStaff = () => {
	dialogVisible.value = true
	chooseDialogue.value.show('staff', staffData.value)
}
const getChooseData = (val) => {
	console.log(val, '数据回显')
	staffData.value = val
	reqQrChartData()
	handleRefresh()
}
const chooseDialogue = ref(null)

const selfTime = ref([])
const date_typeList = ref([])
date_typeList.value = dateTypes
const staffList = ref([])
staffList.value = staffListData
const reqQrChartData = async() =>{
	if(selfTime.value[0]){
		queryForm.value.date_type='self'
	}
	if (selfTime.value){
		if (selfTime.value.length==2){
			queryForm.value.ktime = selfTime.value[0]
			queryForm.value.dtime = selfTime.value[1]
		}else{
			queryForm.value.ktime =''
			queryForm.value.dtime = ''
		}
	}else{
		queryForm.value.ktime =''
		queryForm.value.dtime = ''
	}
	if (staffData.value.length>0) {
		queryForm.value.staffs = []
		staffData.value.forEach(item=>{
			queryForm.value.staffs.push(item.id)
		})
	}
	const r = await postDataGroupChart(queryForm.value)
	let xData = []
	let yData = []
	if(r){
    // tableData.value = r.data
		r.data.forEach(item=>{
			xData.push(item.time)
      if (queryForm.value.type==1){
        yData.push(item.new_chat_cnt)
      }else if (queryForm.value.type==2){
        yData.push(item.chat_total)
      }else if (queryForm.value.type==3){
        yData.push(item.chat_has_msg)
      }else if (queryForm.value.type==4){
        yData.push(item.new_member_cnt)
      }else if (queryForm.value.type==5){
        yData.push(item.member_total)
      }else if (queryForm.value.type==6){
        yData.push(item.member_has_msg)
      }else if (queryForm.value.type==7){
        yData.push(item.msg_total)
      }
		})
	}
	let myChart = echarts.init(document.getElementById('myChart123'))
	// 绘制图表
	myChart.setOption({
		xAxis: {
			data: xData
		},
    yAxis: {},
    tooltip: {
			trigger: 'axis',
		},
		series: [
			{
				name: queryForm.value.type==1?'新增客户群数量':queryForm.value.type==2?'截至当天客户群总数量':queryForm.value.type==3?'截至当天有发过消息的客户群数':queryForm.value.type==4?'客户群新增群人数':queryForm.value.type==5?'截至当天客户群总人数':queryForm.value.type==6?'截至当天有发过消息的群成员数':'截至当天客户群消息总数',
				type: 'line',
				data: yData,
				itemStyle: {
					borderRadius: [0, 5, 5, 0],
					color: '#1890ff'
				},
				lineStyle: {
					color: '#1890ff'
				}
				// areaStyle:{
				// 	color:'#1890ff',
				// },
			}
		]
	})
	window.onresize = function () {
		// 自适应大小
		myChart.resize()
	}
}
onMounted(() => {
	reqQrChartData()
})
</script>

<template>
	<div class="app-edit app-gap-block-top">
		<div class="app-container">
			<div class="table-title app-flex-left">趋势图</div>
			<div class="app-gap-block-top">
				<div>
					<el-radio-group @change="reqQrChartData" v-model="queryForm.type" size="large">
						<el-radio-button :label="1">新增客户群数量</el-radio-button>
						<el-radio-button :label="2">截至当天客户群总数量</el-radio-button>
						<el-radio-button :label="3">截至当天有发过消息的客户群数量</el-radio-button>
						<el-radio-button :label="4">客户群新增群人数</el-radio-button>
						<el-radio-button :label="5">截至当天客户群总人数</el-radio-button>
						<el-radio-button :label="6">截至当天有发过消息的群成员数</el-radio-button>
						<el-radio-button :label="7">截至当天客户群消息总数</el-radio-button>
					</el-radio-group>
				</div>
				<div class="app-gap-block-top app-flex-left">
					<el-select  @change="reqQrChartData" v-model="queryForm.date_type" class="m-2" placeholder="请选择" size="large">
						<el-option v-for="(item, index) in date_typeList" :key="index" :label="item.title" :value="item.name" />
					</el-select>
					<span class="app-gap-words-left app-select-right">自定义：</span>
					<el-date-picker
					@change="reqQrChartData"
						class="app-date-picker"
						 value-format="YYYY-MM-DD"
							format="YYYY-MM-DD"
						v-model="selfTime"
						type="daterange"
						range-separator="~"
						start-placeholder="开始日期"
						end-placeholder="结束日期"
						size="large"
					/>
					<span class="app-gap-words-left app-select-right">选择员工：</span>
					<span v-if="isRefresh">
						<span @click="chooseStaff" class="app-flex-2 app-choose-staff" v-if="staffData.length > 2">
							<span class="app-flex-left">
								<el-avatar
									v-if="staffData[0].avatar"
									class="cho-margin"
									shape="square"
									:size="30"
									:src="staffData[0].avatar"
								/>
								<span>{{ staffData[0].name }}等{{ staffData.length }}个账号</span>
							</span>
							<el-icon>
								<ArrowDown />
							</el-icon>
						</span>
						<span @click="chooseStaff" class="app-flex-2 app-choose-staff" v-else>
							<span class="app-flex-left" v-for="(item, index) in staffData" :key="index">
								<el-avatar v-if="item.avatar" class="cho-margin" shape="square" :size="30" :src="item.avatar" />
								<span>{{ item.name }}</span>
							</span>
							<span v-if="staffData.length == 0"> </span>
							<el-icon>
								<ArrowDown />
							</el-icon>
						</span>
					</span>
				</div>
				<div class="app-gap-block-top">
					<div id="myChart123" :style="{ width: '100%', height: '550px' }"></div>
				</div>
			</div>
		</div>
		<div></div>
		<ChooseDialogue :dialogVisible="dialogVisible" @getChooseData="getChooseData($event, val)" ref="chooseDialogue" />
	</div>
</template>
<style lang="scss">
@import url('../../../../style/app-component.scss');
@import '../../../../style/mixin.scss';
</style>
